<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Mr.Zhang
  Date: 2024/12/12
  Time: 22:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>主页</title>
    <!--<link href="css/assets/dist/css/bootstrap.min.css" rel="stylesheet">-->
    <link href="<c:url value="/bootstrap/bootstrap-5.3.3-dist/css/bootstrap.min.css"/>" rel="stylesheet"/>
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        .b-example-divider {
            height: 3rem;
            background-color: rgba(0, 0, 0, .1);
            border: solid rgba(0, 0, 0, .15);
            border-width: 1px 0;
            box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
        }

        .b-example-vr {
            flex-shrink: 0;
            width: 1.5rem;
            height: 100vh;
        }

        .bi {
            vertical-align: -.125em;
            fill: currentColor;
        }

        .nav-scroller {
            position: relative;
            z-index: 2;
            height: 2.75rem;
            overflow-y: hidden;
        }

        .nav-scroller .nav {
            display: flex;
            flex-wrap: nowrap;
            padding-bottom: 1rem;
            margin-top: -1px;
            overflow-x: auto;
            text-align: center;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }
        #iframe{
            background-color: white;
            width: 100%;
            height: 99%;
            /*border: none;*/
        }
        .border-buttom{
            border-bottom: 2px solid white;
        }
    </style>

    <link href="<c:url value="/css/headers.css"/>" rel="stylesheet">
</head>
<body>
<header class="p-3 text-bg-dark">
    <div class="container">
        <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
            <a href="#" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
                <img src="<c:url value="/img/programmer2.png"/>" alt="" width="42" height="42" _mstalt="138918" _msthash="229">
            </a>
            &emsp;
            <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0" id="HeardNav">

            </ul>

            <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
                <input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..." aria-label="Search">
            </form>

            <div class="text-end">
                <button type="button" class="btn btn-outline-light me-2">搜索</button>
            </div>

            <div class="dropdown text-end">
                <a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    <img src="<c:url value="/img/keli.ico"/>" alt="mdo" width="32" height="32" class="rounded-circle">
                </a>
                <ul class="dropdown-menu text-small" style="">
                    <li><a class="dropdown-item" href="/erp/Login">退出登录</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">注册</a></li>
                </ul>
            </div>
            <label data-user-roleId="${user.sysRoles.id}" id="userVal">${user.loginId}</label>
        </div>
    </div>
</header>

<div class="container-fluid" style="background-color: #F8F9FA;">
    <div class="row">
        <div class="col-3" style="height: 740px;overflow-y: auto;">

            <div class="d-flex flex-column flex-shrink-0 p-3 " style="width: 100%;margin-top: 				10px;background-color: white;">
                <a target="iframe" href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark 					text-decoration-none">
                    <span class="card-list">
                        <svg xmlns="img/svg/card-list.svg" width="30" height="30" fill="currentColor" class="bi bi-card-list" viewBox="0 0 16 16">
                            <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"></path>
                            <path d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"></path>
                        </svg>
                    </span>
                    &emsp;
                    <span class="fs-4" id="navBtn"> 产品设计</span>
                </a>
                <hr>

                <div class="accordion accordion-flush" id="accordionFlushExample" >

                </div>
            </div>
        </div>
        <div class="col-9" style="height: 740px;padding: 10px 10px 10px 0;overflow-y: auto;">
            <iframe name="iframe" id="iframe" src="/erp/Welcome"></iframe>
        </div>
    </div>
</div>
<div class="container">
    <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
        <p class="col-md-4 mb-0 text-muted">© 2024 猿始人科技</p>

        <a href="#" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
            <!--<svg class="bi me-2" width="40" height="32">
                <use xlink:href="#bootstrap"></use>
            </svg>-->
            <img src="<c:url value="/img/programmer.png"/>" alt="" width="42" height="42" _mstalt="138918" _msthash="229">
        </a>

        <ul class="nav col-md-4 justify-content-end">
            <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li>
            <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li>
            <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
            <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
        </ul>
    </footer>
</div>
<script type="text/javascript" src="<c:url value="/js/jquery-3.7.0.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/bootstrap/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"/>"></script>
<script type="text/javascript" >
    $(function(){
        initialNav();
    })
    function initialNav() {
        let roleId = $('#userVal').attr("data-user-roleId");
        $.ajax({
            type:"get",
            url:"/sys-menus/initialNav?roleId="+roleId,
            dataType:"json",
            success:function (data) {
                console.log(data);
                $.each(data,function (i,menu) {
                    console.log(menu);
                    let li = "<li><a class='nav-link px-2 text-white' data-menuId='"+menu["id"]+"' href='javascript:initialList("+menu["id"]+")'>"+menu["name"]+"</a></li>"
                    $("#HeardNav").append(li);
                })
                $("#HeardNav li").on("click",function(){
                    $(this).addClass("border-buttom");
                    $(this).siblings().removeClass("border-buttom")
                    $("#navBtn").text($(this).text());
                    initialList($(this).children("a").attr("data-menuId"));
                })
                $("#HeardNav").children().eq(0).trigger("click");
            }
        })
    }
    function initialList(parentId){
        let roleId = $('#userVal').attr("data-user-roleId");
        $.ajax({
            type:"get",
            url:"/sys-menus/initialList?roleId="+roleId,
            dataType:"json",
            success:function (data) {
                console.log(data);
                console.log(parentId);
                $.each(data,function (i,menu) {
                    if(menu["id"]==parentId){
                        let id = menu["id"];
                        // console.log(id);
                        $("#accordionFlushExample").html("");
                        for(let i=0;i<data.length;i++){
                            if(data[i]["parentId"]==id){
                                console.log("------1-------")
                                console.log(data[i]);
                                let li = '<div class="accordion-item">' +
                                    '<h2 class="accordion-header" id="flush-heading'+data[i]["id"]+'">' +
                                    '<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse'+data[i]["id"]+'" aria-expanded="false" aria-controls="flush-collapse'+data[i]["id"]+'">'+
                                    '<span>'+
                                    '<svg xmlns="img/svg/stack.svg" width="25" height="25" fill="currentColor" class="bi bi-stack" viewBox="0 0 16 16">'+
                                    '<path d="m14.12 10.163 1.715.858c.22.11.22.424 0 .534L8.267 15.34a.598.598 0 0 1-.534 0L.165 11.555a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.66zM7.733.063a.598.598 0 0 1 .534 0l7.568 3.784a.3.3 0 0 1 0 .535L8.267 8.165a.598.598 0 0 1-.534 0L.165 4.382a.299.299 0 0 1 0-.535L7.733.063z"/>'+
                                    '<path d="m14.12 6.576 1.715.858c.22.11.22.424 0 .534l-7.568 3.784a.598.598 0 0 1-.534 0L.165 7.968a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.659z"/>'+
                                    '</svg>'+
                                    '</span>'+
                                    '&emsp;'+
                                    data[i]["name"]+
                                    '</button>' +
                                    '</h2>'+
                                    '<div id="flush-collapse'+data[i]["id"]+'" class="accordion-collapse collapse" aria-labelledby="flush-heading'+data[i]["id"]+'" data-bs-parent="#accordionFlushExample">'
                                    // '<div class="accordion-body">';


                                for(let j=0;j<data.length;j++){
                                    if(data[j]["parentId"]==data[i]["id"]) {
                                        console.log("========2=========");
                                        console.log(data[j]);
                                        console.log("=================");
                                        let x = true;
                                        for(let k=0;k<data.length;k++){

                                            if(data[k]["parentId"]==data[j]["id"]) {
                                                x=true
                                                break;
                                            }else{
                                                x = false
                                            }
                                        }
                                        if(x){
                                            let li3 ='<div class="accordion-body">'+
                                                        '<div class="accordion accordion-flush" id="accordionFlushExample'+i+'" >'+
                                                            '<div class="accordion-item">'+
                                                                '<h2 class="accordion-header" id="flush-heading'+data[j]["id"]+'">'+
                                                                    '<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse'+data[j]["id"]+'" aria-expanded="false" aria-controls="flush-collapse'+data[j]["id"]+'">'+
                                                                        '<span>'+
                                                                        '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-layers-fill" viewBox="0 0 16 16">'+
                                                                        '<path d="M7.765 1.559a.5.5 0 0 1 .47 0l7.5 4a.5.5 0 0 1 0 .882l-7.5 4a.5.5 0 0 1-.47 0l-7.5-4a.5.5 0 0 1 0-.882l7.5-4z"/>'+
                                                                        '<path d="m2.125 8.567-1.86.992a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882l-1.86-.992-5.17 2.756a1.5 1.5 0 0 1-1.41 0l-5.17-2.756z"/>'+
                                                                        '</svg>'+
                                                                        '</span>'+
                                                                        '&emsp;'+
                                                                        data[j]["name"]+
                                                                    '</button>'+
                                                                '</h2>'+
                                                                '<div id="flush-collapse'+data[j]["id"]+'" class="accordion-collapse collapse" aria-labelledby="flush-heading'+data[j]["id"]+'" data-bs-parent="#accordionFlushExample'+i+'">';

                                                                    for(let k=0;k<data.length;k++){
                                                                        if(data[k]["parentId"]==data[j]["id"]) {
                                                                            let li4 = '<div class="accordion-body">'+
                                                                                '<a class="nav-link px-2 text-black" href="javascript:initialIframe('+'\''+data[k]["linkUrl"]+'\''+')">'+
                                                                                data[k]["name"]+
                                                                                '</a>'+
                                                                                '</div>';
                                                                            li3 += li4;
                                                                        }
                                                                    }
                                                            li3+='</div>'+
                                                            '</div>'+
                                                        '</div>'+
                                                     '</div>';
                                            li += li3;

                                        }else{
                                            let li2 = '<div class="accordion-body">'+
                                                '<a class="nav-link px-2 text-black" href="javascript:initialIframe('+'\''+data[j]["linkUrl"]+'\''+')">'+
                                                data[j]["name"]+
                                                '</a>'+
                                                '</div>';
                                            li += li2;
                                        }
                                    }
                                }
                                li +='</div>'+
                                    '</div>';
                                $("#accordionFlushExample").append(li);
                            }
                        }
                    }
                })
            }
        })
    }

    function initialIframe(url) {
        $("#iframe").attr("src",url);
    }
</script>
</body>
</html>

